<template>
	<div class="container">
		<div class="login-wraper">
			<h2>{{ title }}</h2>
			<PswLogin v-if="isPhoneLogin" @bind-change="bindChange"></PswLogin>
			<PhoneLogin v-else @bind-change="bindChange"></PhoneLogin>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PswLogin from './PswLogin.vue'
import PhoneLogin from './PhoneLogin.vue'

const isPhoneLogin = ref<boolean>(true)
const bindChange = (phone: boolean) => {
	isPhoneLogin.value = phone
}
const title = ref<string>(import.meta.env.VITE_APP_TITLE)
</script>

<style scoped lang="scss">
.container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #2b3c4d;
	.login-wraper {
		width: 100%;
		max-width: 400px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		h2 {
			color: white;
		}
	}
}
</style>
